<!-- 评教管理：课堂教学质量评价汇总：汇总设置 -->
<template>
  <div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="queryForm.semester" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;" @change="handleSearch">
          <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
        </el-select>
      </el-form-item>
      <div style="width: 100%; display: flex; flex-direction: row-reverse;">
        <div class="button-style" style="margin: 6px 0 0 20px;" @click="handleCreate">
          <span>汇总数据同步</span>
        </div>
        <div :class="queryForm.setType === 3 ? 'checked-style' : 'unchecked-style'" style="margin: 6px 0 0 20px;" @click="handleWeight">
          <span>汇总结果权重</span>
        </div>
        <div :class="queryForm.setType === 2 ? 'checked-style' : 'unchecked-style'" style="margin: 6px 0 0 20px;" @click="handleColleague">
          <span>系级同行优秀率设置</span>
        </div>
        <div :class="queryForm.setType === 1 ? 'checked-style' : 'unchecked-style'" style="margin: 6px 0 0 20px;" @click="handleDerict">
          <span>系级督导优秀率设置</span>
        </div>
      </div>
    </el-form>
    <el-table
      v-if="queryForm.setType !== 3"
      border
      :data="tableData"
      :span-method="handleTableSpan"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column :key="Math.random()" prop="pycc" label="培养层次" show-overflow-tooltip align="center" />
      <el-table-column :key="Math.random()" prop="zcdj" label="职称" show-overflow-tooltip align="center" />
      <el-table-column :key="Math.random()" label="优秀比例（90分以上）" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.yxbl" controls-position="right" size="mini" :precision="2" :min="0" :max="100" @blur="handleChange(scope.row)" />
          <span>&nbsp;%</span>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="queryForm.setType === 3"
      border
      :data="tableData1"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column :key="Math.random()" prop="summaryName" label="汇总结果" show-overflow-tooltip align="center" />
      <el-table-column :key="Math.random()" label="所占比例" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.rate" controls-position="right" size="mini" :precision="2" :min="0" :max="100" @blur="handleChange(scope.row)" />
          <span>&nbsp;%</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reqGetXqList, querySummarySetList, updateSummaryInfo } from '@/api/admin1/check'
import { createSummaryData } from "@/api/teachingEvaluation/summary"
export default {
  data() {
    return {
      queryForm: {
        semester: '',
        setType: 1
      },
      semesterList: [],
      tableData: [],
      tableData1: [],
      levelId: '',
      spanArray: [],
      summaryForm: {}
    }
  },
  mounted() {
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
        this.queryForm.semester = res.data.data[0].xqmc
        this.queryForm.setType = 1
        this.handleSearch()
      }
    })
  },
  methods: {
    handleSearch: function () {
      this.tableData = []
      this.tableData1 = []
      const params = {
        lx: this.queryForm.setType,
        trem: this.queryForm.semester
      }
      querySummarySetList(params).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          if (this.queryForm.setType === 3) {
            this.tableData1.push({ id: res.data.data[0].id, type: 'ddjgzb', summaryName: '督导结果占比', rate: res.data.data[0].ddjgzb })
            this.tableData1.push({ id: res.data.data[0].id, type: 'thjgzb', summaryName: '同行结果占比', rate: res.data.data[0].thjgzb })
            this.tableData1.push({ id: res.data.data[0].id, type: 'xyzb', summaryName: '学员占比', rate: res.data.data[0].xyzb })
          } else {
            this.tableData = res.data.data
            let array
            this.levelId = ''
            this.spanArray = []
            this.tableData.forEach((record, index) => {
              // 记录合并行的起始行号
              if (this.levelId !== record.pyccid) {
                this.levelId = record.pyccid
                this.spanArray.push(index)
              }
              // 合并行的依据：各职称下等级数量
              array = this.tableData.filter(item => {
                return item.pyccid === record.pyccid
              })
              record.rowSpan = array.length
            })
          }
        }
      })
    },
    handleCreate: function () {
      this.$confirm('确认同步评教汇总数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const record = this.semesterList.find(item => {
          return item.xqmc === this.queryForm.semester
        })
        const params = {
          xueqi: record.id
        }
        createSummaryData(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success('数据同步成功！')
          }
        })
      })
    },
    handleWeight: function () {
      this.queryForm.setType = 3
      this.handleSearch()
    },
    handleColleague: function () {
      this.queryForm.setType = 2
      this.handleSearch()
    },
    handleDerict: function () {
      this.queryForm.setType = 1
      this.handleSearch()
    },
    handleChange: function (row) {
      let params = {}
      if (this.queryForm.setType === 3) {
        params.id = row.id
        if (row.type === 'ddjgzb') {
          params.ddjgzb = row.rate
        } else if (row.type === 'thjgzb') {
          params.thjgzb = row.rate
        } else {
          params.xyzb = row.rate
        }
      } else {
        params = {
          id: row.id,
          yxbl: row.yxbl
        }
      }
      updateSummaryInfo(params).then(res => {
        if (res.data.code !== 200) {
          this.$message({
            message: '比例自动保存失败！',
            type: 'error'
          })
        }
      })
    },
    handleTableSpan: function ({ row, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.spanArray.indexOf(rowIndex) >= 0) {
          return {
            rowspan: row.rowSpan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  .checked-style {
    float: left;
    background: #01C86E;
    border: 1px solid #01C86E;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      color: white;
    }
  }
  .unchecked-style {
    float: left;
    background: #F1FFFA;
    border: 1px solid #01C86E;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      color: #01C86E;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
